<template>
    <div class="video_box">
        <video :src="videoSrc"
               :poster="poster"
               id="myVideo"
               preload="auto"
               type="video/mp4"
               width="100%"
               webkit-playsinline="true"
               playsinline="true"
               x5-video-player-type="h5"
               x5-video-player-fullscreen="true"
               x5-video-orientation="portraint"
               loop="loop"
               @click="videoClick"
               @pause="videoPause"
               @playing="videoPlay"
        >
            您的浏览器不支持video
        </video>
        <!--<div class="downTips">
            <div class="down">
                <img src="../../assets/img/downImg.png" alt="">
                <span>铺连铺</span>
            </div>
            <button @click="downApp">打开看看</button>
        </div>-->
        <div class="video_start_icon" ref="videoStartBun" @click="draw1"></div>
        <div class="videoInfo">
            <p class="title">@{{info.author.nickname}}</p>
            <p class="content">{{info.video.describes}}</p>
            <div class="music">
                <div class="music_left_icon"></div>
                <!--<div ref="advertBox">
                    <div ref="advert" :class="nomove ? 'nomove': ''">
                        <span ref="advert_1">{{info.music.title}}</span>
                        <span ref="advert_2">{{info.music.title}}</span>
                        <span ref="advert_3">{{info.music.title}}</span>
                    </div>
                </div>-->
                <div ref="advertBox">
                        <span ref="advert_1">{{info.music.title}}</span>
                        <span ref="advert_2">{{info.music.title}}</span>
                        <span ref="advert_3">{{info.music.title}}</span>
                </div>
            </div>
            <button @click="downApp" class="videoBtn" v-if="info.video.activityType == '2' || info.video.activityType == '3'">{{info.video.activityType == '2' ? '立即购买' : '查看详情'}}</button>
        </div>
        <div class="dom_right">
            <div class="avatar" @click="downApp">
                <img v-lazy="{src: info.author.headImgUrl}" alt="">
            </div>
            <div class="icon_home_like_before" style="margin-bottom: .04rem" @click="downApp"></div>
            <p style="margin-bottom: .26rem">{{info.statistics.praiseNum || 0}}</p>
            <div class="icon_home_comment" style="margin-bottom: .04rem" @click="downApp"></div>
            <p style="margin-bottom: .26rem">{{info.statistics.commentNum || 0}}</p>
            <div class="icon_home_share" style="margin-bottom: .04rem" @click="downApp"></div>
            <p style="margin-bottom: .74rem">分享</p>
            <div class="music_cover_icon" ref="musicCover" @click="downApp">
                <img v-lazy="{src:info.music.coverLarge}" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    var advertStyle;
    export default {
        name: 'video',
        data() {
            return {
                videoSrc: null,
                poster: null,
                video: null,
                info:{
                    video:{},
                    music:{},
                    statistics:{},
                  author:{},
                },
                nomove:false,
                time:null
            }
        },
        activated() {
            this.init()
        },
        deactivated(){
            this.time = null
        },
        methods: {
            init() {
                this.info={
                    video:{},
                    music:{},
                    statistics:{},
                  author:{}
                }
                this.nomove = false
                this.time = null
                this.queryVideoInfos()
                this.video = document.getElementById("myVideo");
                this.video.load();
                window.onresize = function(){
                    document.getElementById("myVideo").style.width = window.innerWidth + "px";

                    document.getElementById("myVideo").style.height = window.innerHeight + "px";

                }
            },
            videoClick(){
                    if(this.$refs.videoStartBun.className.indexOf('none') >= 0){
                        this.videoPause()
                    }else{
                        this.videoPlay()
                    }
            },
            videoPause(){
                if(this.$refs.videoStartBun.className.indexOf('none') >= 0){
                    this.$refs.videoStartBun.classList.remove('none')
                    this.$refs.musicCover.classList.remove('play')
                    this.video.pause();
                    clearTimeout(this.time)
                    this.time = null
                }
            },
            videoPlay(){
                if(this.$refs.videoStartBun.className.indexOf('none') < 0){
                    this.$refs.videoStartBun.classList.add('none')
                    this.$refs.musicCover.classList.add('play')
                    this.video.play();
                    if(this.time == null){
                        this.tipMove()
                    }
                }
            },
            draw1() {
                this.videoClick()
            },
            queryVideoInfos() {
                this.$ajax.queryVideoInfos({
                    videoId: this.$route.query.videoId || null,
                    loginToken: null
                })
                    .then(res => {
                        this.info = res.body.content.list[0]
                        this.$route.meta.title = this.info.video.title
                        this.comJS.refreshHead(this.info.video.title)
                        this.videoSrc = this.info.video.playUrl
                        this.poster = this.info.video.originCover
                        this.$nextTick(()=>{
                            this.$refs.advert_1.style.left = 0 + 'px'
                            this.$refs.advert_2.style.left = this.$refs.advert_1.offsetLeft  + this.$refs.advert_1.offsetWidth + 40 + 'px'
                            this.$refs.advert_3.style.left = this.$refs.advert_2.offsetLeft  + this.$refs.advert_2.offsetWidth + 40 + 'px'
                        })

                    })
            },
            downApp(){
                let that = this;
                this.$vux.confirm.show({
                    title:'温馨提示',
                    content:'即将离开当前页面',
                    onConfirm(){
                        that.$router.push('/down')
                    }
                })
            },
            tipMove(){
                /*var boxWidth = this.$refs.advertBox.offsetWidth
                var w = this.$refs.advert.offsetWidth
                var advert = this.$refs.advert
                    this.nomove = true
                    this.nomove = false
                    advertStyle = document.createElement('style')
                    advertStyle.id = 'advert'
                    advertStyle.innerHTML = `@keyframes mymove {
        from {
            transform: translateX(0);
        }
        to{
            transform: translateX(-${w}px);
        }
    }`
                    advert.style.animationDuration = w * 10 / boxWidth + 's'
                    document.body.appendChild(advertStyle)*/


                //第二种滚动
                var boxLeft = this.$refs.advertBox.offsetLeft
                this.boxMove()

            },
            boxMove(){
                //
                this.$refs.advert_1.style.left = this.$refs.advert_1.offsetLeft -1 + 'px'
                this.$refs.advert_2.style.left = this.$refs.advert_2.offsetLeft -1 + 'px'
                this.$refs.advert_3.style.left = this.$refs.advert_3.offsetLeft -1 + 'px'
                if(this.$refs.advert_1.offsetLeft + this.$refs.advert_1.offsetWidth + this.$refs.advertBox.offsetLeft <= this.$refs.advertBox.offsetLeft){
                    this.$refs.advert_1.style.left = this.$refs.advert_3.offsetWidth + this.$refs.advert_3.offsetLeft + 40 +  'px'
                }
                if(this.$refs.advert_2.offsetLeft + this.$refs.advert_2.offsetWidth + this.$refs.advertBox.offsetLeft <= this.$refs.advertBox.offsetLeft){
                    this.$refs.advert_2.style.left = this.$refs.advert_3.offsetWidth + this.$refs.advert_3.offsetLeft + 40 + 'px'
                }
                if(this.$refs.advert_3.offsetLeft + this.$refs.advert_3.offsetWidth + this.$refs.advertBox.offsetLeft <=  this.$refs.advertBox.offsetLeft){
                    this.$refs.advert_3.style.left = this.$refs.advert_1.offsetWidth + this.$refs.advert_1.offsetLeft + 40 + 'px'
                }
                this.time = setTimeout(() => {
                    this.boxMove()
                },20)
            }
        }
    }
</script>
<style lang="less" scoped>
    .video_box {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: #000;
        background-image: url("../../assets/img/video_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    video {
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        /*height: 100%;*/
        /*object-fit: fill;*/
        /*object-fit: cover;*/
    }

    .video_start_icon {
        width: 1.1rem;
        height: 1.1rem;
        background-image: url("../../assets/img/video_start_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 100;
        &.none{
            display: none;
        }
    }

    .downTips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
        padding: .22rem .22rem .22rem .3rem;
        background-color: rgba(0, 0, 0, .5);
        button {
            width: 1.76rem;
            height: .66rem;
            background-color: #FC355F;
            border-radius: .32rem;
            font-size: .28rem;
            color: #fff;
            text-align: center;
            line-height: .66rem;
        }
    }

    .down {
        display: flex;
        align-items: center;
        img {
            width: .66rem;
            height: .66rem;
            margin-right: .3rem;
        }
        span {
            font-size: .24rem;
            color: #fff;
        }

    }

    .videoInfo {
        width: 90%;
        position: absolute;
        left: 0;
        bottom: .8rem;
        color: #fff;
        max-width: 70%;
        padding-left: .24rem;
        .title {
            font-size: .32rem;
            margin-bottom: .18rem;
        }
        .content {
            font-size: .28rem;
            margin-bottom: .18rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            line-height: 1.2;
            white-space: normal;
            word-break: break-all;
            word-wrap: break-word;
            color: rgba(255,255,255,.8);
        }
        .music {
            width: 100%;
            height: .3rem;
            font-size: .26rem;
            display: flex;
            align-items: center;
            &>div:last-child {
                width: 70%;
                height: 100%;
                position: relative;
                overflow: hidden;
                &:before{
                    content: '';
                    display: block;
                    width: .2rem;
                    height: 100%;
                    background: linear-gradient(to right, rgba(35,15,21,.1) , rgba(35,15,21,0));
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                &:after{
                    content: '';
                    display: block;
                    width: .2rem;
                    height: 100%;
                    background: linear-gradient(to left, rgba(35,15,21,.1) , rgba(35,15,21,0));
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                /*div{
                    animation: mymove 10s linear infinite;
                    position: relative;
                    &.nomove {
                        animation: null;
                    }
                }*/
                span{
                    white-space: nowrap;
                    margin-right: .2rem;
                    position: absolute;
                    top: 2px;
                    left: 0;
                }
            }
        }
    }
    .music_left_icon {
        width: .24rem;
        height: .24rem;
        background-image: url("../../assets/img/music_left_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: .06rem;
    }

    .dom_right{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: .16rem;
        bottom: .8rem;
        color: #fff;
        font-size: .24rem;
    }
    .music_cover_icon{
        width: .9rem;
        height: .9rem;
        background-image: url("../../assets/img/music_cover.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        &.play{
            -webkit-animation: rotate 2s linear 1s 5 alternate;
            animation: rotate 2s linear infinite;
        }
        img{
            width: .4rem;
            height: .4rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
        }
    }
    .icon_home_comment{
        width: .8rem;
        height: .8rem;
        background-image: url("../../assets/img/icon_home_comment.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .icon_home_like_before{
        width: .8rem;
        height: .8rem;
        background-image: url("../../assets/img/icon_home_like_before.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .icon_home_share{
        width: .8rem;
        height: .8rem;
        background-image: url("../../assets/img/icon_home_share.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .videoBtn{
        width: 100%;
        height: .6rem;
        border-radius: .1rem;
        margin-top: .18rem;
        color: #fff;
        background-color: #e94f4f;
        font-size: .3rem;
    }
    .avatar{
        width: .8rem;
        height: .8rem;
        border-radius: .5rem;
        overflow: hidden;
        margin-bottom: .6rem;
        border: 1px solid #fff;
        img{
            width: 100%;
            height: 100%;
        }
    }
</style>
